<template>
  <div class="footer-bar">
    <div class="con">
      <div class="weather">
        <h3>Current Weather</h3>
        <i>Cloudy and sunny</i>
        <div class="weather-img">
          <img src="@/views/home/homeImages/组 27@2x.png" alt="">
          <span><b>{{temperature || 22}}</b>°C</span>
        </div>
      </div>
      <div class="contact">
        <h3>联系我们</h3>
        <ul>
          <li>成都紫檀民宿文化发展有限公司（总部）</li>
          <li>地址：成都市成华区长融东三路155号</li>
          <li>电话：0282-2578757</li>
        </ul>
        <ul>
          <li>大理紫檀民宿文化管理有限公司</li>
          <li>地址：大理古城南门文献路44号</li>
          <li>电话：0282-2578757</li>
        </ul>
      </div>
      <div class="mobile">
        <h3>移动端</h3>
        <ul>
          <li>微信公众号：ROSEWOOD紫檀</li>
          <li>邮箱：2578757932@qq.com</li>
        </ul>
      </div>
    </div>
    <div class="copyright">
      <span>&copy; passingcloud.cn 版权所有 粤ICP备16067867号 -1</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'footer-bar',
  data () {
    return {
      temperature: ''
    }
  },
  created () {
    this.getTemperature()
  },
  methods: {
    getTemperature () {
      axios.get('https://www.tianqiapi.com/api?version=v6&appid=21375891&appsecret=fTYv7v5E&city=%E6%88%90%E9%83%BD').then(res => {
        this.temperature = res.data.tem
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .footer-bar{
    width: 100%;
    height: 457px;
    background: #798C9D;
    .con{
      width: 1200px;
      height: 318px;
      margin: 0 auto;
      padding-top: 62px;
      display: flex;
      justify-content: space-between;
      .weather{
        h3{
          width: 241px;
          height: 42px;
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 42px;
          color: #FFFFFF;
        }
        i{
          width: 158px;
          height: 25px;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 25px;
          color: #FFFFFF;
          margin: 5px 0;
          display: inline-block;
        }
        .weather-img{
          img{
            width: 57px;
            height: 56px;
          }
          span{
            width: 69px;
            height: 50px;
            font-size: 22px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 50px;
            color: #FFFFFF;
            margin-left: 20px;
            b{
              font-size: 32px;
            }
          }
        }
      }
      .contact,.mobile{
        h3{
          width: 120px;
          height: 42px;
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 42px;
          color: #FFFFFF;
          margin-bottom: 9px;
        }
        ul{
          margin-bottom: 28px;
          li{
            height: 25px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 25px;
            color: #FFFFFF;
            margin-bottom: 6px;
          }
        }
      }
    }
    .copyright{
      width: 100%;
      border-top: 1px solid #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        width: 426px;
        height: 25px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 72px;
        color: #FFFFFF;
      }
    }
  }
</style>
